<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 324 204"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect fill="#F2F7FF" rx="24" height="196.265" width="306.368" y="7.735"/><path fill="#99C2FF" d="m322.323 91.59-37.92-1.452c-1.257-.047-2.028 1.191-1.295 2.079l9.248 11.204-49.125 30.577-15.879-19.218c-.982-1.19-2.871-1.445-4.218-.606l-69.93 43.542c-.324.203-.543.51-.608.853-.065.343.029.695.261.979l7.012 8.534c.483.586 1.435.723 2.109.303l60.142-37.42 15.861 19.215c.985 1.174 2.87 1.445 4.218.606l58.987-36.687 9.248 11.204c.166.2.393.355.656.449.262.093.55.121.829.079.28-.041.54-.15.752-.313a1.31 1.31 0 0 0 .446-.612l10.597-31.65c.287-.808-.399-1.64-1.391-1.666Z"/><path fill="#1A446C" d="m61.702 131.532.81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.343-2.61-2.053 1.656-.864-1.53 2.448-.918-2.447-.882.828-1.476 2.106 1.62-.36-2.628h1.673l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.465.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.071 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.071 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Zm9.07 0 .81 1.44-2.466.918 2.466.918-.828 1.476-2.052-1.62.378 2.61h-1.656l.342-2.61-2.052 1.656-.864-1.53 2.448-.918-2.448-.882.828-1.476 2.106 1.62-.36-2.628h1.674l-.396 2.628 2.07-1.602Z"/><path fill="#fff" d="M35.521 59.773c0-13.255 10.745-24 24-24h117.394c13.255 0 24 10.745 24 24V204H35.521V59.773Z"/><rect fill="#1A446C" rx="7.5" height="29.938" width="106.673" y="150.358" x="129.263"/><rect stroke="#E6EAEF" rx="7.5" height="29.938" width="106.673" y="150.358" x="129.263"/><path fill="#fff" d="M140.263 156.994a1.5 1.5 0 0 1 1.5-1.5h9.874l5.626 5.626v12.54a1.5 1.5 0 0 1-1.5 1.5h-14a1.5 1.5 0 0 1-1.5-1.5v-16.666Zm1.5-.5h9.167v4.833a.5.5 0 0 0 .5.5h4.833v11.833a.5.5 0 0 1-.5.5h-14a.5.5 0 0 1-.5-.5v-16.666a.5.5 0 0 1 .5-.5Zm10.167.707 3.626 3.626h-3.626v-3.626Z" clip-rule="evenodd" fill-rule="evenodd"/><path fill="#fff" d="M148.639 170.994a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path fill="#fff" d="m152.952 173.014-2-2 .707-.707 2 2a.5.5 0 0 1-.707.707Zm16.842-3.687-3.157-3.498v3.498h-1.001v-7.667h1.001v3.553l3.168-3.553h1.265l-3.476 3.839 3.509 3.828h-1.309Zm7.927-3.245c0 .191-.011.392-.033.605h-4.818c.037.594.238 1.06.605 1.397.374.33.825.495 1.353.495.433 0 .792-.099 1.078-.297a1.62 1.62 0 0 0 .616-.814h1.078a2.618 2.618 0 0 1-.968 1.419c-.484.359-1.085.539-1.804.539a3.075 3.075 0 0 1-1.54-.385 2.754 2.754 0 0 1-1.056-1.089c-.257-.477-.385-1.027-.385-1.65s.125-1.17.374-1.639a2.6 2.6 0 0 1 1.045-1.078c.455-.257.975-.385 1.562-.385.572 0 1.078.125 1.518.374.44.249.777.594 1.012 1.034.242.433.363.924.363 1.474Zm-1.034-.209c0-.381-.084-.708-.253-.979a1.592 1.592 0 0 0-.693-.627 2.062 2.062 0 0 0-.957-.22c-.506 0-.939.161-1.298.484-.352.323-.554.77-.605 1.342h3.806Zm7.547-2.574-3.63 8.866h-1.034l1.188-2.904-2.431-5.962h1.111l1.892 4.884 1.87-4.884h1.034Zm9.037 0-1.881 6.028h-1.034l-1.452-4.785-1.452 4.785h-1.034l-1.892-6.028h1.023l1.386 5.06 1.496-5.06h1.023l1.463 5.071 1.364-5.071h.99Zm3.622 6.127a3.113 3.113 0 0 1-1.54-.385 2.8 2.8 0 0 1-1.078-1.089c-.257-.477-.385-1.027-.385-1.65 0-.616.132-1.159.396-1.628a2.75 2.75 0 0 1 1.1-1.089 3.136 3.136 0 0 1 1.551-.385c.572 0 1.089.128 1.551.385.462.249.825.609 1.089 1.078.271.469.407 1.016.407 1.639s-.139 1.173-.418 1.65a2.836 2.836 0 0 1-1.111 1.089c-.469.257-.99.385-1.562.385Zm0-.88a2.11 2.11 0 0 0 1.012-.253c.315-.169.568-.422.759-.759.198-.337.297-.748.297-1.232s-.095-.895-.286-1.232a1.838 1.838 0 0 0-.748-.748 2.048 2.048 0 0 0-1.001-.253c-.367 0-.704.084-1.012.253a1.785 1.785 0 0 0-.726.748c-.183.337-.275.748-.275 1.232 0 .491.088.906.264 1.243.183.337.425.59.726.759.301.161.631.242.99.242Zm5.408-4.268c.176-.345.425-.612.748-.803.33-.191.73-.286 1.199-.286v1.034h-.264c-1.122 0-1.683.609-1.683 1.826v3.278H201.3v-6.028h1.001v.979Zm2.729 2.013c0-.616.124-1.155.374-1.617.249-.469.59-.832 1.023-1.089.44-.257.931-.385 1.474-.385.469 0 .905.11 1.309.33.403.213.711.495.924.847v-3.19h1.012v8.14h-1.012v-1.133a2.391 2.391 0 0 1-.88.891c-.389.227-.844.341-1.364.341a2.788 2.788 0 0 1-1.463-.396 2.77 2.77 0 0 1-1.023-1.111c-.25-.477-.374-1.019-.374-1.628Zm5.104.011c0-.455-.092-.851-.275-1.188a1.902 1.902 0 0 0-.748-.77 1.966 1.966 0 0 0-1.023-.275c-.374 0-.715.088-1.023.264a1.915 1.915 0 0 0-.737.77c-.184.337-.275.733-.275 1.188 0 .462.091.865.275 1.21.183.337.429.598.737.781.308.176.649.264 1.023.264.374 0 .715-.088 1.023-.264.315-.183.564-.444.748-.781a2.52 2.52 0 0 0 .275-1.199Zm4.837 3.124c-.462 0-.876-.077-1.243-.231a2.16 2.16 0 0 1-.869-.66 1.788 1.788 0 0 1-.352-.979h1.034c.03.301.169.546.418.737.257.191.591.286 1.001.286.382 0 .682-.084.902-.253.22-.169.33-.381.33-.638a.617.617 0 0 0-.352-.583c-.234-.132-.597-.26-1.089-.385a8.981 8.981 0 0 1-1.1-.352 2.101 2.101 0 0 1-.726-.539c-.198-.242-.297-.557-.297-.946 0-.308.092-.59.275-.847.184-.257.444-.458.781-.605a2.757 2.757 0 0 1 1.155-.231c.668 0 1.207.169 1.617.506.411.337.631.799.66 1.386h-1.001a1.027 1.027 0 0 0-.385-.759c-.227-.191-.535-.286-.924-.286-.359 0-.645.077-.858.231a.716.716 0 0 0-.319.605c0 .198.063.363.187.495.132.125.294.227.484.308.198.073.47.158.814.253.433.117.785.235 1.056.352.272.11.503.279.693.506.198.227.301.524.308.891 0 .33-.091.627-.275.891a1.86 1.86 0 0 1-.781.627c-.33.147-.711.22-1.144.22Z"/><rect stroke="#fff" fill="#1A446C" rx="5.784" height="11.569" width="41.181" y="143.59" x="53.781"/><rect stroke="#fff" fill="#1A446C" rx="5.784" height="11.569" width="24.531" y="113.619" x="115.943"/><rect fill="#E6F0FF" rx="6.768" height="13.536" width="86.582" y="55.109" x="54.391"/><rect fill="#E6F0FF" rx="6.768" height="13.536" width="102.123" y="85.081" x="54.391"/><rect fill="#06F" rx="6.768" height="13.536" width="33.301" y="85.081" x="107.673"/><rect fill="#E6F0FF" rx="6.768" height="13.536" width="57.721" y="113.119" x="54.391"/><path fill="#06F" d="M281.018 50.335h-15.002c-2.124-17.973-16.378-32.227-34.351-34.35V.981a.985.985 0 0 0-.982-.982h-7.366a.985.985 0 0 0-.982.982v15.002c-17.973 2.124-32.227 16.378-34.351 34.35h-15.002a.985.985 0 0 0-.982.983v7.366c0 .54.442.982.982.982h15.002c2.124 17.973 16.378 32.227 34.351 34.35v15.003c0 .54.442.982.982.982h7.366c.54 0 .982-.442.982-.982V94.016c17.973-2.124 32.227-16.378 34.351-34.35h15.002c.54 0 .982-.443.982-.983v-7.366a.985.985 0 0 0-.982-.982ZM227 84.955c-16.549 0-29.955-13.406-29.955-29.955 0-16.55 13.406-29.955 29.955-29.955S256.955 38.45 256.955 55c0 16.55-13.406 29.955-29.955 29.955Z"/><path fill="#1A446C" d="M227 41c-4.012 0-7.762 1.55-10.6 4.4-2.837 2.837-4.4 6.587-4.4 10.6s1.563 7.763 4.4 10.6c2.838 2.825 6.6 4.4 10.6 4.4s7.762-1.563 10.6-4.4c2.825-2.837 4.4-6.6 4.4-10.6s-1.563-7.763-4.4-10.6c-2.838-2.85-6.587-4.4-10.6-4.4Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class New3 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
